<template>
      <a-modal :title="title" :width="500" class="custom-modal" :confirmLoading="submitLoading" @cancel="visible=false" :visible="visible" :footer="null">
        <a-form-model :model="formRelation" ref="formRelation" style="padding:0 24px">
          <a-row :gutter="10" v-for="(domain,index) in formRelation.payForm" :key="index">
              <a-col :span="22">
                <a-form-model-item label="付款账号" :prop="`payForm[${index}].value`" 
                :rules="[{ required: true, message: '请输入付款账号!' },
                { required: true, pattern: /^[0-9]*$/, message: '支持数字格式',trigger: 'blur'}]">
                  <a-input placeholder="请输入付款账号" :disabled="domain.flag" v-model="domain.value"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="2" style="padding-top: 40px;">
                <a-button icon="minus-circle" size="large" v-if="!domain.flag" @click="removeFeeForm(index)" type="link"></a-button>
              </a-col>
            </a-row>   
        </a-form-model>
        <div class="ant-modal-footer">
          <a-button @click="addsFeeForm" style="float: left" type="primary">新增</a-button>
          <a-button @click="visible=false">取消</a-button>
          <a-button @click="handleCmbSubmit('formRelation')" type="primary">提交</a-button>
        </div>
      </a-modal>
</template>
<script>
import { 
  sysAddEnterpriseCmbPayAccount
} from '@/api/manage/openAccount'
export default {
  name: 'openAccount',
  data () {
    return {
        title:'付款账户',
        visible:false,
        id:'',
        submitLoading:false,
        formRelation:{
          payForm:[]
        }
    }
  },
  methods:{
    add(id,cardsArr){
      this.id = id;
      if(cardsArr && cardsArr.length === 0){
        this.formRelation.payForm = [];
        this.formRelation.payForm.push({
          value: '',
          flag:false
        });
      }else{
        let arr = [];
        cardsArr.forEach(v=>{
          arr.push({value:v.bankCardNum,flag:true});
        })
        this.formRelation.payForm = arr;
      }
      this.visible = true;
    },
    removeFeeForm(index) {
       this.formRelation.payForm.splice(index, 1)
    },
    addsFeeForm(){
      this.formRelation.payForm.push({
        value: '',
        flag:false
      });
    },
    handleCmbSubmit(formName){
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const { formRelation,id } = this;
          let params = {};
          params.id = id;
          var payForm = [];
          formRelation.payForm.forEach(v=>{
            if(!v.flag){
              payForm.push(v.value)
            }
          })
          params.cards = payForm;
           this.submitLoading = true;
          const {code} =  await sysAddEnterpriseCmbPayAccount(params);
           this.submitLoading = false;
          if(code === '1'){
            this.$message.success('操作成功');
            this.visible = false;
            this.$emit("on-ok");
          }
        }else{
          return false;
        }
      });
    }
  }
}
</script>
<style>
.custom-modal{
    text-align: center;
}
.custom-modal .ant-modal-body {
    padding: 0;
}
.ant-modal-footer {
    padding: 10px 16px;
    text-align: right;
    background: transparent;
    border-radius: 0 0 4px 4px;
    border-top: 1px solid rgba(0,0,0,.06);
}
</style>